<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script language="JavaScript" type="text/javascript" src="GraphicEngine/ui/jquery-ui/js/jquery-1.9.1.js"></script>
<script language="JavaScript" type="text/javascript" src="GraphicEngine/core/demodata.js"></script>
<script language="JavaScript" type="text/javascript" src="integration/js/mockup-ui.js"></script>
<script language="JavaScript" type="text/javascript" src="GraphicEngine/extension/facade-api.js"></script>
</head>
<body>
	<!-- Mockup layout HTML -->
	<table>
	<!-- Mockup Header -->
	<tr>
		<td>
			<img src='integration/images/header.jpg'/>
		</td>
	</tr>
	<tr>
		<td>
			<table>
				<tbody>
				<tr>
					<!-- Mockup Sidebar -->
					<td style='width:10%;' valign='top'>
						<table>
							<!-- Mockup Top Panel -->
							<tr>
								<td>
									<img src='integration/images/top_panel.jpg'/>
								</td>
							</tr>
							<!-- Mockup Picture Repository -->
							<tr>
								<td>
									<fieldset>
										<legend>Picture Repository</legend>
										<div id='sidebar' style='width:200px;'></div>
									</fieldset>
								</td>
							</tr>
							<!-- Mockup Clinical Repository -->
							<tr>
								<td>
									<img src='integration/images/bottom_panel.jpg'/>
								</td>
							</tr>
						</table>
					</td>
					<!-- ANTK component -->
					<td valign='top' style='height:800px;width:90%;'>
						<iframe id='com' name='com' src='application.html' style='border-width:0px;'></iframe>
					</td>
				</tr>
				</tbody>
			</table>
		</td>
	</tr>
	</table>
	<script>
			var iframe = document.getElementById("com");
			iframe.onload = function(){
				// Create antk object
				var antk = new Antk(iframe);
				
				// Set component size (entire antk component includes toolbox panel, canvas and etc..)
				antk.setComponentSize(1000,700);
				
				// Initialize Component
				antk.initComponent();
				
				// Picture Repository (defined in integration/js/mockup-ui.js)
				var repository = document.getElementById("pictureRepository");
				repository.onclick = function() {
					// Set background
					antk.setImage(repository.value);
				}
			}
	</script>
</body>
</html>